<template>
    <div>
        <div style="margin-top: 1%">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item >首页</el-breadcrumb-item>
                <el-breadcrumb-item>采购申请</el-breadcrumb-item>
                <el-breadcrumb-item>维护</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--搜索区域-->
        <div>
            <el-form :inline="true" :model="formInline">
                <el-form-item label="单据编号">
                    <el-input v-model="formInline.djbh" placeholder="请输入单据编号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getDatas">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handelAdd">添加</el-button>
                </el-form-item>
            </el-form>

            <el-table
                    :data="dataWithPage"
                    style="width: 100%"
                    height="250"
                    border>
                <el-table-column v-for="item in tableColumn "
                                 :prop="item.prop"
                                 :label="item.label"
                                 :width="item.width">
                </el-table-column>
              <el-table-column
                fixed="right"
                label="审核标志"
               >
                <template slot-scope="shbzSlot">
                  <span v-if="shbzSlot.row.shbz ==0" style="color: red">未审核</span>
                  <span v-else style="color: green">已审核</span>
                </template>
              </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                      <el-button type="text" size="small"@click="handleDelete(scope.row.id)">删除</el-button>
                      <el-button v-if="scope.row.shbz == 0" @click="handleChangeStatus(scope.row)" type="text" size="small">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="limitData.length">
            </el-pagination>

            <!--添加-->
            <el-dialog title="审核信息" :visible.sync="showAddDialog">
                <el-form :model="form" :rules="rules" ref="ruleform" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="制单人"  prop="zdr">
                                <el-input v-model="form.zdr" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="交货日期"  prop="jhrq">
                              <el-date-picker
                                v-model="form.jhrq"
                                type="datetime"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                default-time="12:00:00"
                                placeholder="选择日期时间">
                              </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                  <el-row>
                      <el-col :span="12">
                            <el-form-item label="数量">
                                <el-input v-model="form.suliang" :disabled="true" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    <el-col :span="12">
                      <el-form-item label="实际含税单价"  prop="sjhsdj">
                        <el-input  type="number" v-model="form.sjhsdj" autocomplete="off"></el-input>
                      </el-form-item>
                    </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showAddDialog = false">取 消</el-button>
                    <el-button type="primary" @click="handleConfine">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
  import { mapActions ,mapMutations} from 'vuex';
  import CgsqdApi from "../../../api/CgsqdApi";
  import CgddApi from '../../../api/CgddApi';
  export default {
    name: 'index',
    data() {
      return {
        activeIndex: 1,
        currentPage: 1,
        pageSize: 5,
        formInline: {
          djbh: '',
          region: '',

        },
        changeForm:{
          id:'',
          shbz:'',

        },
        tableColumn: [
         {
            prop: 'addtime',
            label: '新增日期',
          }, {
            prop: 'djbh',
            label: '单据编号',
          },
          {
            prop: 'wlzdm',
            label: '物料代码',
          },{
            prop: 'wlmc',
            label: '物料名称',
          },
          {
            prop: 'ggxh',
            label: '规格型号',
          },{
            prop: 'suliang',
            label: '数量',
          },{
            prop: 'dhrq',
            label: '到货日期',
          },{
            prop: 'gysmc',
            label: '供应商',
          },
          {
            prop: 'sybm',
            label: '部门',
          },{
            prop: 'sqr',
            label: '申请人',
          },

        ],
        tableData: [
          {
            id:1,
            addtime: '2020-10-23',
            djbh: '43434343',
            shbz: 0,
            gbbz: 1,
            sybm: '销售部',
            jhddh: '45545445',
            wlzdm: '45545454',
            wlmc: '面辅料电脑',
            suliang: '77',
            dhrq: '2020-12-14',
            gysmc: '北京lGONS',
            jycgrq: '2020-12-10',
            hsl: '0.3',
          },   {
            id:1,
            addtime: '2020-10-23',
            djbh: '43434343',
            shbz: 0,
            gbbz: 1,
            sybm: '销售部',
            jhddh: '45545445',
            wlzdm: '45545454',
            wlmc: '面辅料电脑',
            suliang: '77',
            dhrq: '2020-12-14',
            gysmc: '北京lGONS',
            jycgrq: '2020-12-10',
            hsl: '0.3',
          },   {
            id:1,
            addtime: '2020-10-23',
            djbh: '43434343',
            shbz: 0,
            gbbz: 1,
            sybm: '销售部',
            jhddh: '45545445',
            wlzdm: '45545454',
            wlmc: '面辅料电脑',
            suliang: '77',
            dhrq: '2020-12-14',
            gysmc: '北京lGONS',
            jycgrq: '2020-12-10',
            hsl: '0.3',
          },
        ],
        tableData2: this.$store.getters.skuDatas,
        showAddDialog: false,
        dialogFormVisible: false,
        form: {
          zdr: '',
          jhrq: '',
          sjhsdj: '',
          jshj: '',
        },
        rules: {
          pingpai: [
            { required: true, message: '请输入商品名', trigger: 'blur' },
          ], spm: [
            { required: true, message: '请输入品牌', trigger: 'blur' },
          ], skudm: [
            { required: true, message: '请输入sku代码', trigger: 'blur' },
          ], guige: [
            { required: true, message: '请输入规格', trigger: 'blur' },
          ], leimu: [
            { required: true, message: '请输入类目', trigger: 'blur' },
          ], danwei: [
            { required: true, message: '请输入单位', trigger: 'blur' },
          ], cpsx: [
            { required: true, message: '请输入产品属性', trigger: 'blur' },
          ], bzj: [
            { required: true, message: '请输入标准价', trigger: 'blur' },
          ],

        }
      };
    }
    ,
    mounted() {
      console.log(this.$store.getters.skuDatas);
      console.log(this.$store.getters.cangkuDatas);
      // this.tableData  = this.$store.getters.skuDatas;
      this.getDatas();
    },
    computed:{
      limitData() {
        let data = [...this.tableData];
        return data;
      },
      // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data
      dataWithPage() {
        const data = this.limitData;
        const start = this.currentPage * this.pageSize - this.pageSize;
        const end = start + this.pageSize;
        return [...data].slice(start, end);
      },
    },
    methods: {
      // T和Z时间转换
      changeDate(oldDate) {
        var dateee = new Date(oldDate).toJSON();//这个ie不兼容，会返回1970年的时间
        var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
          .toISOString()
          .replace(/T/g, " ")
          .replace(/\.[\d]{3}Z/, "");
        return date;
      },

      //查询数据
      getDatas(){
        CgsqdApi.findByPage({
          djbh:this.formInline.djbh

        })
          .then(res => {
            // 返回数据
            if(res.flag){
              for (let i = 0;i<res.data.length;i++){
                res.data[i].dhrq = this.changeDate(res.data[i].dhrq )
              }
              this.tableData = res.data;
            }
          })
          .catch(err => {
            // 异常情况
          })
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      ...mapMutations('user', ['addSkuDatas', 'updateSkuDatas','deleteSkuDatas']),
      //确认添加
      handleConfine() {
        var validate = false;
        this.$refs['ruleform'].validate((valid) => {
          if (valid) {
            validate = true;
          } else {
            console.log('error submit!!');
            validate = false;
            return false;
          }
        });
        if (validate === false) {
          return;
        }
        //重置审核状态
       // 数据进入采购订单页
        CgsqdApi.update({
          id:this.changeForm.id,
          shbz:'1'
        })
          .then(res => {
            // 返回数据
            if(res.flag){
              // this.showAddDialog = false;
              this.$message.success("审核成功!");
              this.goToNext();
              this.getDatas();
            }
          })
          .catch(err => {
            // 异常情况
          })



      },
      goToNext(){
        let data = {
          bumen: this.changeForm.sybm ,//部门
          djbh:  this.changeForm.djbh,//单据编号
          gys:  this.changeForm.gysmc,//供应商
          ggxh: this.changeForm.ggxh,//规格型号



          suliang: this.changeForm.suliang,//数量

          wlzdm:this.changeForm.wlzdm,//物料代码
          wlmc: this.changeForm.wlmc,//物料名称

          zdr:this.form.zdr,//制单人
          jhrq:this.form.jhrq,//交货日期
          sjhsdj:this.form.sjhsdj,//实际含税单价 44
          jshj:parseInt(this.form.sjhsdj) * parseInt(this.changeForm.suliang)+'',//价税合计 44

        }
        console.log(data)

        CgddApi.add(data)
          .then(res => {
            // 返回数据
            if(res.flag){
              this.form  = {
                bumen: '',
                djbh: '',
                gys: '',
                ggxh: '',
                sjhsdj: '',
                suliang: '',
                jshj: '',
                wlzdm: '',
                wlmc: '',
                zdr: '',
              }
            }
            this.showAddDialog = false;
          })
          .catch(err => {
            // 异常情况
          })
  },
      handleDelete(id){
        this.$confirm('是否确定删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          CgsqdApi.delete({
            id:id
          })
            .then(res => {
              // 返回数据
              if(res.flag){
                this.$message.success("删除成功!");
                //删除成功后，再次查询数据，获取最新数据库中的数据
                this.getDatas();
              }
            })
            .catch(err => {
              // 异常情况
            })

        }).catch(() => {
        });
      },
      //确认订单状态
      handleChangeStatus(row){
        this.changeForm.id = row.id;
        this.changeForm.addtime = row.addtime;//新增日期
        this.changeForm.djbh = row.djbh;//单据编号
        this.changeForm.wlzdm = row.wlzdm;//物料代码
        this.changeForm.wlmc = row.wlmc//物料名称
        this.changeForm.ggxh = row.ggxh;//规格型号
        this.changeForm.suliang = row.suliang;//数量
        this.form.suliang = row.suliang;//数量
        this.changeForm.dhrq = row.dhrq;//到货日期
        this.changeForm.gysmc = row.gysmc;//供应商
        this.changeForm.sybm = row.sybm;//部门
        this.changeForm.sqr = row.sqr;//申请人
        this.showAddDialog = true;
      },
      handelAdd(){
        this.$router.push('/cgsqdMg/add')
      }
    },
  };
</script>

<style scoped>

</style>
